import { Col, Row, Card, Table, Tag } from 'antd';
import * as Icon from '@ant-design/icons';
import './home.css'
// useEffect 在页面加载之后调用的生命周期
import { useEffect, useState } from 'react';
import { getData, getList, getEcharts } from '../../api/home'
import { showMallCircle, getChartsData } from '../../api/mall'
import * as echarts from 'echarts';
import MyEcharts from '../../components/echarts'

export default function Home() {
    let userImg = require('../../assets/head.png')
    // 创建饼图的响应数据
    const [circleData, setCircleData] = useState({})
    // 创建echarts的响应数据
    let [chartData, setChartData] = useState([])

    // 定义table数据, 所有后端返回的数据都要通过 useState 定义
    let [tableData, changeTableData] = useState([])
    // DOM首次渲染完成
    useEffect(() => {
        let userdata
        let videodata
        // getChartsData().then((res) => {
        //     changeTableData(res.data.tableData)
        //     const { userData, videoData } = res.data
        //     userdata = userData
        //     videodata = videoData
        // })
        showMallCircle().then((res) => {
            console.log(res, 'resssssssss');
            // videodata = res.data
            setCircleData({
                video: {
                    series: [
                        {
                            data: res.data && res.data.map((item) => {
                                return item
                            }),
                            type: 'pie'
                        }
                    ]
                }
            })
        })

        // 基于准备好的dom，初始化echarts实例
        // var myChart = echarts.init(document.getElementById('main'));
        // 绘制图表
        // myChart.setOption({
        //     title: { /* 图表的标题 */
        //         text: 'ECharts 入门示例'
        //     },
        //     tooltip: {},
        //     xAxis: {  /* x轴的 内容 */
        //         data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        //     },
        //     yAxis: {},
        //     series: [  /* 当前的数据 */
        //         {
        //             name: '销量',
        //             type: 'bar',
        //             data: [5, 20, 36, 10, 10, 20]
        //         }
        //     ]
        // });  /* 封装为了 echarts 组件 */
        getChartsData().then((res) => {
            // 表格数据
            changeTableData(res.data.tableData)

            // 折线图配置
            const { data, date } = res.data.orderData
            // 对于 echarts 数据的组装
            // x轴数据
            const xData = date
            // series数据
            // 拿到每一个数据的key
            const keyArray = Object.keys(data[0])
            const series = []
            keyArray.forEach((key, index) => {
                series.push({
                    name: key,
                    type: 'line',
                    data: data.map((item) => {
                        return item[key]
                    })
                })
            })
            // 柱状图配置
            const { userData } = res.data
            userdata = userData

            setChartData({
                order: {
                    xData,
                    series
                },
                user: {
                    xData: userdata && userdata.map((item) => {
                        return item.date
                    }),
                    series: [
                        {
                            name: '新增用户',
                            data: userdata && userdata.map((item) => {
                                return item.new
                            }),
                            type: 'bar'
                        }
                    ]

                },
            })
        })
    }, [])

    // 定义列
    const columns = [
        { title: '商品', dataIndex: 'name' },
        { title: '今日购买', dataIndex: 'todayBuy' },
        { title: '本月购买', dataIndex: 'monthBuy' },
        { title: '总购买', dataIndex: 'totalBuy' },
    ]
    // 订单统计数据
    const countData = [
        {
            'name': '今日支付订单',
            'value': 1234,
            'icon': 'CheckCircleOutlined',
            'color': '#2ec7c9'
        },
        {
            'name': '今日收藏订单',
            'value': 1234,
            'icon': 'ClockCircleOutlined',
            'color': '#2ec7c9'
        },
        {
            'name': '今日未支付订单',
            'value': 1234,
            'icon': 'CloseCircleOutlined',
            'color': '#2ec7c9'
        },
        {
            'name': '本月支付订单',
            'value': 1234,
            'icon': 'CheckCircleOutlined',
            'color': '#2ec7c9'
        },
        {
            'name': '本月收藏订单',
            'value': 1234,
            'icon': 'ClockCircleOutlined',
            'color': '#2ec7c9'
        },
        {
            'name': '本月未支付订单',
            'value': 1234,
            'icon': 'CloseCircleOutlined',
            'color': '#2ec7c9'
        },
    ]
    // 定义一个根据图标名称生成组件的方法
    function GetIcon(name) {
        const Icons = Icon[name]
        return <Icons />
    }
    return (
        <Row className="home">
            <Col span={8}>
                <Card hoverable>
                    <div className='user'>
                        <img src={userImg} />
                        <div className='userinfo'>
                            <p className='name'>Admin</p>
                            <p className='identify'>管理员</p>
                        </div>
                    </div>
                    <div className='loginInfo'>
                        <p>上次登陆时间：<span>2024-7-19</span></p>
                        <p>上次登陆地点：<span>南京</span></p>
                    </div>
                </Card>
                <Card>
                    <Table dataSource={tableData} rowKey={'name'} columns={columns} pagination={false}></Table>
                    {/* tableData,返回的数据都应该有个 key,相当于 vue中遍历数据要加key一样 */}
                </Card>
            </Col>
            <Col span={16}>
                <div className='num'>
                    {
                        // 书写jsx相关的逻辑
                        countData.map((item, index) => {
                            return (
                                // 凡是列表渲染都需要加 key
                                <Card key={index}>
                                    <div className='icon-box' style={{
                                        backgroundColor: item.color
                                    }}>
                                        {GetIcon(item.icon)}
                                    </div>
                                    <div className='detail'>
                                        <p className='num'>${item.value}</p>
                                        <p className='txt'>{item.name}</p>
                                    </div>
                                </Card>
                            )
                        })
                    }
                </div>
                {/* <div id='main' style={{height:'300px'}}>

                </div> */}
                {chartData.order && <MyEcharts chartData={chartData.order} style={{ height: '280px' }}></MyEcharts>}
                <div className='graph'>
                    {chartData.user && <MyEcharts chartData={chartData.user} style={{ height: '240px', width: '50%' }}></MyEcharts>}
                    {circleData.video && <MyEcharts chartData={circleData.video} style={{ height: '240px', width: '50%' }}></MyEcharts>}
                </div>
            </Col>
        </Row>
    )
}